<template>
    <div id="full_screen"></div>
    <div id="header" class="w-color base-img">
        <span><img src="/logo.png" style="width:310px; height: 50px;" alt=""></span>
        <div class="mr30">
            <a @click="editpass"><img src="/01.png"> 修改密码</a>
            <a @click="logout"><img src="/02.png">退出登录</a>
            <a><img src="/03.png">{{myname}}</a>
        </div>
    </div>
    <!-- <div id="decorate_top"></div>
    <div id="decorate_bottom"></div> -->
    <div id="menu">
        <div>
            <!-- <div class="item hid pointer" @click="proxy.routerPushMixin('/workhome')">
                <span class="icon">首页</span>
            </div> -->
            <div class="item pointer" :class="{'hid':m.showhid}" v-for="(m,i) in menu" :key="i">
                <span :class="`icon ${m.icon}`" @click="m.showhid=!m.showhid">{{m.label}}</span>
                <a @click="toMenu(m,n)" :class="`t${n.selected?'1':'0'}`" v-for="n in m.sub" :key="n">{{n.label}}</a>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="submenu">
            <a @click="toPage(sm)" :class="{'selected':sm.selected}" v-for="sm in submenu" :key="sm">{{sm.label}}</a>
        </div>
        <div id="subbody">
            <!-- <router-view /> -->
            <router-view v-slot="{ Component }">
                <keep-alive>
                    <Transition>
                        <component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path"/>
                    </Transition>
                </keep-alive>
                <component :is="Component" v-if="!$route.meta.keepAlive"/>
            </router-view>
        </div>
        <el-dialog v-model="obj.drawer.show" :title="obj.drawer.title" width="1000px" :close-on-click-modal="false" :destroy-on-close="true">
            <Editpass />
        </el-dialog>
    </div>
    <div class="suspension-box spot" :class="[obj.new?'spot1':'']" v-if="obj.userType==='mechanism'">
        <div class="suspension flex-center  size-32 w-color pointer" @click="obj.showtab=!obj.showtab;">
            <span class="mb5 icon"></span>
        </div>
        <div class="tab-box flex-column base-bg" v-show="obj.showtab">
            <div class="pd10 flex-center mini-size pointer active tab" v-for="(v,k) in obj.charts" :key="k" @click="chart(k)">
                <div :class="[v.isnew?'spot':'']">{{v.title}}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive,ref,getCurrentInstance,toRefs,toRaw,watch } from 'vue'
import Stomp from "stompjs"
import Editpass from './editpass.vue'
let { proxy } = getCurrentInstance()
// console.log(proxy.$route.query.toString())
// 有window.location.search，则从服务器拿相应的菜单回来，同时把token和userType写入sessionStorge，完成后，跳转到main
// 跳过来后，没有window.location.search，且有sessionStorge，此时调用接口，获取用户的权限菜单，但由于这里有多级了，可能会影响到下面的，并且下面的菜单也要改了
let cururl = proxy.$route.path.split('/',3)[2]; //这个是当前路由proxy.$route，上面上路由列表router.currentRoute.value，两个不一样
let obj = reactive({
    menu:[],submenu:[],myname:sessionStorage.getItem("name"),
    stompClient: null,
    drawer: {
        show: false,
        title: '修改密码'
    },
    showtab: false,
    charts: {
        train_persion: { title: '人才培训',isnew: false},
        train: { title: '企业培训',isnew: false},
        insurance: { title: '保险',isnew: false},
        banking: {title: '金融',isnew: false}
    },
    new: false,
    userType: sessionStorage.getItem("userType"),
    monitordata: proxy.$Websocket.monitordata
});

watch(
    ()=>obj.charts,
    (o)=>{
        console.log(o);
        let nw = false;
        for (const key in o) {
            if (Object.hasOwnProperty.call(o, key)) {
                nw = o[key].isnew?true:nw
            }
        }
        obj.new = nw
    },{ deep: true }
)

watch(
    ()=>obj.monitordata,
    (msg)=>{
        console.log(msg);
        let v = proxy.globalData.topicObj[msg.type]
        if(msg.type==='offline'){
            const rootUpdate = async ()=>{
                let updata = await proxy.$utils.rootUpdate(proxy)
                console.log(updata);
                if(updata){
                    getMenu()
                }else{
                    logout()
                }
            }
            rootUpdate()
        }else if(msg.type==='talk_banking'||msg.type==='talk'||msg.type==='talk_train'||msg.type==='talk_insurance'){//聊天
            // 直接提示跳转好像不对 每次有新消息都提示 out
            // const notify = proxy.$notify({
            //     type: v.type||'success',
            //     position: 'bottom-right',
            //     duration: 0,
            //     title: v.title||'有新的消息通知',
            //     message: `${msg.title||''} 去看看 >>`,
            //     onClick: res=>{
            //         chart(msg.type.split('_')[1]);
            //         notify.close()
            //     }
            // })
            //换这种 有新消息加红点
            if(msg.type==='talk'){//和个人 培训
                obj.charts.train_persion.isnew = true;
            }else{//和企业
                obj.charts[msg.type.split('_')[1]].isnew = true;
            }
        }else{
            const notify = proxy.$notify({
                type: v.type||'success',
                position: 'bottom-right',
                duration: 0,
                title: v.title||'有新的消息通知',
                message: `${msg.title||''} 去看看 >>`,
                onClick: res=>{
                    goUrl(proxy.$route.path.indexOf(userType)==-1?`/${userType}/${v.url}`:v.url,v.params)
                    notify.close()
                }
            })
        }
    },{ deep: true }
)

let chart = (type)=>{
    let url = '';
    if(type==='train_persion'){
        url = 'train/talk_list_persion'
    }else if(type==='train'){
        url = 'train/talk_list_company'
    }else{
        url = `/${type}/talk_list`
    }
    proxy.$ajax({url: url,data:{currentpage:1,pagesize:1},bfLoading: true}).then(d => {
        if(d.success&&d.msg.list.length){
            obj.charts[type].isnew = false;
            let o = d.msg.list[0]
            console.log(o);
            // return
            if(type==='train_persion'){
                proxy.routerPushNewMixin('/chartpersiondetail',{
                    id: o.train_id,
                    persion_id: o.persion_id,
                    persionname: o.persionname,
                    type: type
                })
            }else{
                proxy.routerPushNewMixin('/chartcompanydetail',{
                    id: o[`${type}_id`],
                    company_id: o.company_id,
                    companyname: o.companyname,
                    type: type
                })
            }
        }else{
            proxy.elMessageMixin('暂无企业咨询信息！', 'error')
        }
    }).catch(e => {
        if(e == "登录已过期，请重新登录"){
            proxy.routerPushMixin('/')
        }
    })
}

const connectSocket = ()=>{
    proxy.$Websocket.init().then((e)=>{
        const userType = sessionStorage.getItem("userType")
        let title1 = `/topic/${userType==='manager'?`all`:`${sessionStorage.getItem("userType")}/${sessionStorage.getItem("ID")}`}`;
        let title2 = `/topic/${sessionStorage.getItem("userId")}`;
        proxy.$Websocket.addSubscribe(title1);
        proxy.$Websocket.addSubscribe(title2);
    })
}
connectSocket()

const getMenu =()=>{
    proxy.$ajax({
        url: 'getMenu',
        data: {},
        bfLoading: true
    }).then(d => {
        let homeMenu = [{
            component: "",
            icon: "home",
            label: "首页",
            show: true,
            sub: [{
                component: "work",
                label: "工作台",
                show: true
            }]
        }]
        let Menu_ = sessionStorage.getItem("userType")==='mechanism'?d.msg.authority:homeMenu.concat(d.msg.authority)
        Menu_.forEach(m => {
        // d.msg.forEach(m => {
            m.showhid = !m.sub.some((v,i) => v.component == cururl) //返回bool，有一个满足即true
            if(!m.showhid){
                let ms = m.sub.filter(e => e.show);
                ms.forEach(e => e.selected = e.component == cururl)
                submenu.value = ms
            }
            m.sub = m.sub.filter(e => e.show && e.label);
            m.show = m.sub.some(t => t.label) //这是用来判断，子项若没有，本项不显示
        })
        menu.value = Menu_.filter(t => t.show)
        myname.value = d.msg.name
        // menu.value = d.msg.filter(t => t.show)
    }).catch(e => {
        // console.log(e)
        if(e == "登录已过期，请重新登录" || e == "token无效" || e == "token失效")
            proxy.routerPushMixin('/')
    })
}
getMenu()

let editpass = () => {
    obj.drawer.show = true
    // proxy.routerPushMixin("/editpass")
}
let logout = () => {
    sessionStorage.clear()
    proxy.routerPushMixin("/")
}
let toMenu = (m,n) => {
    // console.log(toRaw(m))
    obj.menu.forEach(t => {
        t.sub.forEach(x => x.selected = false)
    })
    m.sub.forEach(e => e.selected = e.component == n.component)
    submenu.value = m.sub.filter(e => e.show)
    // proxy.routerPushMixin(n.component)
    proxy.routerPushMixin("/"+sessionStorage.getItem("userType") +"/"+ n.component)
}
let goUrl = (url,param)=>{
    menu.value.forEach(ev=>{
        let showhid = true
        ev.sub.forEach(e => {
            e.selected = e.component == url
            if(showhid){
                showhid = !(e.component == url)
            }
        })
        ev.showhid = showhid
    })
    proxy.routerPushMixin(url,param)
}
let toPage = e => {
    submenu.value.forEach(t => t.selected = t.component == e.component)
    // proxy.routerPushMixin(e.component)
    proxy.routerPushMixin("/"+sessionStorage.getItem("userType") +"/"+ e.component)
}

//导出到页面
let { menu, drawer, submenu, myname, socketUrl } = toRefs(obj)
</script>

<style lang="scss" scoped>
.suspension-box{
    position: fixed;right: 50px;bottom: 200px;z-index: 1;
    .suspension{
        position: relative;z-index: 1;
        width: 50px;height: 50px;border-radius: 50px;   background: #3586f4;
        .icon::before{ font-family: iconfont; content: '\e771';}
    }
    .tab-box{
        position: absolute;z-index: 0;left: 0;top: 0;width: 50px; padding: 50px 0 10px; border-radius: 50px; background: #fff; border: solid 1px #E0ECFF; box-sizing: border-box; overflow: hidden;
        .tab{position: relative;}
        .spot::after{
            content: '';width: 6px;height: 6px;position: absolute;z-index: 10; right: 6px;top: 10px;border-radius: 6px; background: #ff3300;
        }
    }
    .active:hover{color: #3586f4;}
}
.spot1::after{
    content: '';width: 8px;height: 8px;position: absolute;z-index: 10; right: 4px;top: 4px;border-radius: 8px; background: #ff3300;
}
#full_screen{position: fixed; width: 100%; height: 100%; z-index: 999999; pointer-events: none;}
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
    #header { position: absolute; display: flex; width: 100%; height: 100px; z-index: 10; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
    #header > span { font-size: 22px; display: flex; flex: 1; padding-left: 15px; align-items: center; }
    #header div { display: flex; padding-right: 10px; font-size: 14px; align-items: center; }
    #header div * { margin:0 5px; color:#ffffff }
    #header a { cursor: pointer; display: flex; align-items: center; width: 100px; height: 28px; justify-content: center; }
    #header span { width: 129px; text-align: center; }
    #header a img { width: 21px; height: 20px; margin-right: 10px; }

    #decorate_top { position: absolute; top: -830px; left: -630px; width: 1374px; height: 1374px; background: #253037; opacity: 0.03; border-radius: 100%; }
    #decorate_bottom { position: absolute; bottom: -320px; right:-300px; border-radius: 100%; box-sizing: border-box; width: 584px; height: 584px; opacity: 0.21; border: 148px solid #707070; }

    #menu { position: absolute; top: 100px; bottom: 0px; left: 0px; width: 280px; overflow-y: hidden; background-color: #ffffff;box-shadow: 0px 10px 25px 0px rgba(15, 73, 181, 0.1);
border-radius: 10px; }
    #menu > div { height: 100%; overflow: auto; color: #333; }
    #menu .item * { clear: both; display: block; margin-bottom: 5px; }
    /* #menu .item::before { content: ''; display: block; width: 180px; height: 1px; margin: 10px 0 0 10px; background-color: #DEDEDE; } */
    #menu .item:first-child::before { height: 0; }
    #menu .item span { font-size: 14px; height: 60px; line-height: 60px; padding-left: 62px;  background-color: #FFFFFF; }
    #menu .item span::after { font-family: iconfont; content: '\e6c3'; display: block; float: right; color: #9f9f9f; margin-right: 35px; font-size: 12px; }
    #menu .item span::before { font-family: iconfont; color: #9f9f9f;margin-right: 14px; margin-left: -28px; }
    #menu .item.hid span::after { content: '\e6bc'; }
    #menu .item a { font-size: 14px; height: 60px; line-height: 60px; cursor: pointer; padding-left: 62px; background-color: #FFFFFF; }
    #menu .item a.t1 { color: #0B6BFF; background-color: #E0ECFF; }
    /* #menu .item a:hover { background-color: #e8e8e8; } */
    #menu .item.hid a { display: none; }

    #menu .item span.icon::before { content: '\e6ba'; }
    #menu .item span.icon.system::before { content: '\e6c6'; }
    #menu .item span.icon.garden::before { content: '\e6c7'; }
    #menu .item span.icon.company::before { content: '\e6bd'; }
    #menu .item span.icon.persion::before { content: '\e6c5'; }
    #menu .item span.icon.mechanism::before { content: '\e6bf'; }
    #menu .item span.icon.monitoring::before { content: '\e6c1'; }
    #menu .item span.icon.mp::before { content: '\e6be'; }
    #menu .item span.icon.infomation::before { content: '\e6c4'; }

    #main { position: absolute; left: 280px; right: 0; top: 100px; bottom: 0px; overflow: hidden; }
    #main #submenu { position: relative; left: 20px; top: 20px; right: 0; height: 37px; border-bottom: 1px solid #DDD; display: none; }
    #main #submenu span { display: none; }
    #main #submenu::after { content: ''; display: block; clear: both; }
    #main #submenu a { padding:8px 16px; font-size: 14px; color: #333; display: block; float: left; border:1px solid #DDD; margin-left: -1px; }
    #main #submenu a.selected { border-bottom: 1px solid #FFF; background-color: #FFF; border-top: 2px solid #0B6BFF ;}
    #main #subbody { position: absolute; left: 20px; right: 20px; bottom: 20px; top: 20px; border-radius: 10px;
        /* background-color: #FFFFFF; box-shadow: -4px 15px 51px 1px rgba(23, 162, 223, 0.09); */
    }
    /* #main #subbody > div { width: 100%; height: 100%; } */
</style>
